<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>Configuration, methods and events of Kendo UI DateTimePicker</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to configure the UI DateTimePicker widget. Use methods to open, close, remove, enable, disable, set maximum or minimum values and more.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/datetimepicker.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/datetimepicker.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouidatetimepicker"><a href="#kendouidatetimepicker">kendo.ui.DateTimePicker</a></h1>

<p>Represents the Kendo UI DateTimePicker widget. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-animation">
<a href="#configuration-animation">animation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the opening and closing animations of the popups. Setting the <code>animation</code> option to <code>false</code> will disable the opening and closing animations. As a result the popup will open and close instantly.</p>

<p><code>animation:true</code> is not a valid configuration.</p>

<h4>Example - disable open and close animations</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
  animation: false
});
&lt;/script&gt;
</code></pre>

<h4>Example - configure the animation</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
  animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close">
<a href="#configuration-animation.close">animation.close </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation played when a popup is closed.</p>

<h4>Example - configure the close animation</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
  animation: {
   close: {
     effects: "zoom:out",
     duration: 300
   }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close.effects">
<a href="#configuration-animation.close.effects">animation.close.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.</p>

<p><a href="/api/javascript/effects/common">Complete list of available animations</a></p>

<h3 id="configuration-animation.close.duration">
<a href="#configuration-animation.close.duration">animation.close.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The duration of the close animation in milliseconds.</p>

<h3 id="configuration-animation.open">
<a href="#configuration-animation.open">animation.open </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation played when the popup is opened.</p>

<h4>Example - configure the open animation</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
  animation: {
   open: {
     effects: "zoom:in",
     duration: 300
   }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open.effects">
<a href="#configuration-animation.open.effects">animation.open.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.</p>

<p><a href="/api/javascript/effects/common">Complete list of available animations</a></p>

<h3 id="configuration-animation.open.duration">
<a href="#configuration-animation.open.duration">animation.open.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The duration of the open animation in milliseconds.</p>

<h3 id="configuration-ARIATemplate">
<a href="#configuration-ARIATemplate">ARIATemplate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "Current focused date is #=kendo.toString(data.current, 'G')#")</em>
</h3>

<p>Specifies a template used to populate value of the aria-label attribute.</p>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-culture">
<a href="#configuration-culture">culture </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "en-US")</em>
</h3>

<p>Specifies the culture info used by the widget.</p>

<h4>Example - specify German culture internationalization</h4>

<pre><code>&lt;!--
    TODO: Add the kendo.culture.de-DE.min.js file as it is required!

    Here is a sample script tag:
    &lt;script src="http://kendo.cdn.telerik.com/{kendo version}/js/cultures/kendo.culture.de-DE.min.js"&gt;&lt;/script&gt;

    For more information check this help topic:
    http://docs.telerik.com/kendo-ui/framework/globalization/overview
--&gt;

&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    culture: "de-DE"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dateInput">
<a href="#configuration-dateInput">dateInput </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Specifies if the DateTimePicker will use DateInput for editing value</p>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").DateTimePicker({
    dateInput: true
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dates">
<a href="#configuration-dates">dates </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Specifies a list of dates, which will be passed to the <a href="#configuration-month.content">month template</a> of the DateView.
All dates, which match the date portion of the selected date will be used to re-bind the TimeView.</p>

<h4>Example - specify a list of dates</h4>

<pre><code>&lt;style&gt;
  .party{color:red}
&lt;/style&gt;

&lt;input id="datetimepicker" /&gt;

&lt;script id="cell-template" type="text/x-kendo-template"&gt;
  &lt;span class="#= isInArray(data.date, data.dates) ? 'party' : '' #"&gt;#= data.value #&lt;/span&gt;
&lt;/script&gt;

&lt;script&gt;
  $("#datetimepicker").kendoDateTimePicker({
    value: new Date(2000, 10, 1),
    month: {
      content: $("#cell-template").html()
    },
    dates: [
      new Date(2000, 10, 10),
      new Date(2000, 10, 30)
    ] //can manipulate month template depending on this array.
  });

  function isInArray(date, dates) {
    for(var idx = 0, length = dates.length; idx &lt; length; idx++) {
      var d = dates[idx];
      if (date.getFullYear() == d.getFullYear() &amp;&amp;
          date.getMonth() == d.getMonth() &amp;&amp;
          date.getDate() == d.getDate()) {
        return true;
      }
    }

    return false;
  }

&lt;/script&gt;
</code></pre>

<h3 id="configuration-depth">
<a href="#configuration-depth">depth </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Specifies the navigation depth of the calendar. The following
settings are available for the <strong>depth</strong> value:</p>

<ul>
<li>
<code>"month"</code> - Shows the days of the month.</li>
<li>
<code>"year"</code> - Shows the months of the year.</li>
<li>
<code>"decade"</code> - Shows the years of the decade.</li>
<li>
<code>"century"</code> - Shows the decades from the century.</li>
</ul>

<blockquote>
<p>Note the option will not be applied if <strong>start</strong> option is <em>lower</em> than <strong>depth</strong>. Always set both and <strong>start</strong> and <strong>depth</strong> options.</p>
</blockquote>

<h4>Example - set navigation depth of the calendar popup</h4>

<pre><code>&lt;input id="datetimepicker"/&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    depth: "year"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-disableDates">
<a href="#configuration-disableDates">disableDates </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a> <em>(default: null)</em>
</h3>

<p>An array or function that will be used to determine which dates to be disabled for selection by the widget.</p>

<h4>Example - specify an array of days to be disabled</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(),
    disableDates: ["we", "th"],
});
&lt;/script&gt;
</code></pre>

<h4>Example - specify an array of dates to be disabled</h4>

<pre><code>&lt;input id="datetimepicker"&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(2015,9,3),
    disableDates: [new Date(2015,9,12), new Date(2015,9,22)]
});
&lt;/script&gt;
</code></pre>

<p>you can also pass a function that will be dynamically resolved for each date of the calendar. Note that when the function returns true, the date will be disabled.</p>

<h4>Example - use a function to disabled dates</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(),
    disableDates: function (date) {
        var disabled = [13,14,20,21];
        if (date &amp;&amp; disabled.indexOf(date.getDate()) &gt; -1 ) {
            return true;
        } else {
            return false;
        }
    }
});
&lt;/script&gt;
</code></pre>

<p>note that a check for an empty <code>date</code> is needed, as the widget can work with a null value as well.</p>

<blockquote>
<p>This functionality was added with the Q1 release of 2016.</p>
</blockquote>

<h3 id="configuration-footer">
<a href="#configuration-footer">footer </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The <a href="/api/javascript/kendo#methods-template">template</a> which renders the footer of the calendar. If false, the footer will not be rendered.</p>

<h4>Example - specify footer template as a function</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script id="footer-template" type="text/x-kendo-template"&gt;
    Today - #: kendo.toString(data, "d") #
&lt;/script&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    footer: kendo.template($("#footer-template").html())
});
&lt;/script&gt;
</code></pre>

<h4>Example - specify footer template as a string</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    footer: "Today - #: kendo.toString(data, 'd') #"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-format">
<a href="#configuration-format">format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "M/d/yyyy h:mm tt")</em>
</h3>

<p>Specifies the format, which is used to format the value of the DateTimePicker displayed in the input. The format also will be used to parse the input.</p>

<h4>Example - specify a custom date format</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    format: "yyyy/MM/dd hh:mm tt"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-interval">
<a href="#configuration-interval">interval </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 30)</em>
</h3>

<p>Specifies the interval, between values in the popup list, in minutes.</p>

<h4>Example - specify a time interval</h4>

<pre><code>&lt;input id="dateTimePicker" /&gt;
&lt;script&gt;
$("#dateTimePicker").kendoDateTimePicker({
    interval: 15
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-max">
<a href="#configuration-max">max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a><em>(default: Date(2099, 11, 31))</em>
</h3>

<p>Specifies the maximum date, which the calendar can show.</p>

<h4>Example - specify the maximum date</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    max: new Date(2013, 0, 1, 22, 0, 0)
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-min">
<a href="#configuration-min">min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a><em>(default: Date(1900, 0, 1))</em>
</h3>

<p>Specifies the minimum date that the calendar can show.</p>

<h4>Example - specify the minimum date</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    min: new Date(2011, 0, 1, 8, 0, 0)
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-month">
<a href="#configuration-month">month </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Templates for the cells rendered in the calendar "month" view.</p>

<h3 id="configuration-month.content">
<a href="#configuration-month.content">month.content </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Template to be used for rendering the cells in the calendar "month" view, which are in range.</p>

<h4>Example - specify cell template as a string</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script id="cell-template" type="text/x-kendo-template"&gt;
    &lt;div class="#= data.value &lt; 10 ? 'exhibition' : 'party' #"&gt;&lt;/div&gt;
    #= data.value #
&lt;/script&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    month: {
       content: $("#cell-template").html()
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-month.weekNumber">
<a href="#configuration-month.weekNumber">month.weekNumber </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The template to be used for rendering the cells in "week" column. By default, the widget renders the calculated week of the year. 
 The properties available in the data object are:</p>

<ul>
<li>currentDate - returns the first date of the current week.</li>
<li>
<p>weekNumber - calculated week number.</p>

<p>These properties can be used in the template to make additional calculations.  </p>
</li>
</ul>

<h4>Example - specify week number template as a string</h4>

<pre><code>&lt;style&gt;
  .italic{
    font-style: italic;
  }
&lt;/style&gt;
&lt;body&gt;

&lt;input id="datetimepicker1" /&gt;
&lt;script id="week-template" type="text/x-kendo-template"&gt;
   &lt;a class="italic"&gt;#= data.weekNumber #&lt;/a&gt;
&lt;/script&gt;
&lt;script&gt;
  $("#datetimepicker1").kendoDateTimePicker({
    weekNumber: true,
    month: {
      weekNumber: $("#week-template").html()
    }
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-month.empty">
<a href="#configuration-month.empty">month.empty </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The template used for rendering cells in the calendar "month" view, which are outside the min/max range.</p>

<h4>Example - specify an empty cell template as a string</h4>

<pre><code>&lt;input id="datetimepicker1" /&gt;
&lt;script&gt;
$("#datetimepicker1").kendoDateTimePicker({
    month: {
       empty: '-'
    }
});
&lt;/script&gt;
</code></pre>

<h4>Example - add date value to the out-of-range cells</h4>

<pre><code>&lt;input id="datetimepicker2" /&gt;
&lt;script&gt;
$("#datetimepicker2").kendoDateTimePicker({
    month: {
       empty: '&lt;span style="color:\\#ccc;padding:0 .45em 0 .1em;"&gt;#= data.value #&lt;/span&gt;'
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-weekNumber">
<a href="#configuration-weekNumber">weekNumber </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> a week of the year will be shown on the left side of the calendar. It is possible to define a template in order to customize what will be displayed.  </p>

<h4>Example - enable the week of the year option</h4>

<pre><code>&lt;input id="datetimepicker1" /&gt;
&lt;script&gt;
    $("#datetimepicker1").kendoDateTimePicker({
        weekNumber: true
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-parseFormats">
<a href="#configuration-parseFormats">parseFormats </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Specifies the formats, which are used to parse the value set with value() method or by direct input. If not set the value of the <code>options.format</code> and <code>options.timeFormat</code> will be used.
 Note that value of the <code>format</code> option is always used. The <code>timeFormat</code> value also will be used if defined.</p>

<blockquote>
<p>Order of the provided parse formats is important and it should from stricter to less strict.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    format: "yyyy/MM/dd hh:mm tt",
    parseFormats: ["MMMM yyyy", "HH:mm"] //format also will be added to parseFormats
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-start">
<a href="#configuration-start">start </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "month")</em>
</h3>

<p>Specifies the start view of the calendar.
 The following settings are available for the <strong>start</strong> value:</p>

<ul>
<li>
<code>"month"</code> - Shows the days of the month.</li>
<li>
<code>"year"</code> - Shows the months of the year.</li>
<li>
<code>"decade"</code> - Shows the years of the decade.</li>
<li>
<code>"century"</code> - Shows the decades from the century.</li>
</ul>

<h4>Example - specify the initial view, which calendar renders</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
    $("#datetimepicker").kendoDateTimePicker({
        start: "year"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-timeFormat">
<a href="#configuration-timeFormat">timeFormat </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "h:mm tt")</em>
</h3>

<p>Specifies the format, which is used to format the values in the time drop-down list.</p>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    timeFormat: "HH:mm" //24 hours format
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-value">
<a href="#configuration-value">value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a><em>(default: null)</em>
</h3>

<p>Specifies the selected value.</p>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(2011, 0, 1)
});
&lt;/script&gt;
</code></pre>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-options">
<a href="#fields-options">options </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>An object, which holds the options of the widget.</p>

<h4>Example - get options of the widget</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("datetimepicker");

var options = datetimepicker.options;
&lt;script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-close"><a href="#methods-close">close</a></h3>

<p>Closes the calendar or the time drop-down list.</p>

<h4>Parameters</h4>

<h5>view <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The view of the DateTimePicker, expressed as a string.
Available views are "time" and "date".</p>

<h4>Example - close the calendar popup</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;button id="close"&gt;Close&lt;/button&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

$("#close").click(function() {
    datetimepicker.close("date");
});
&lt;/script&gt;
</code></pre>

<h4>Example - close the time popup</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;button id="close"&gt;Close&lt;/button&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

$("#close").click(function() {
    datetimepicker.close("time");
});
&lt;/script&gt;
</code></pre>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the <strong>DateTimePicker</strong> for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p><strong>Important:</strong> This method does not remove the DateTimePicker element from DOM.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

// detach events
datetimepicker.destroy();
&lt;/script&gt;
</code></pre>

<h3 id="methods-enable"><a href="#methods-enable">enable</a></h3>

<p>Enables or disables a DateTimePicker.</p>

<h4>Parameters</h4>

<h5>enable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>Enables (<strong>true</strong> or undefined) or disables (<strong>false</strong>) a DateTimePicker.</p>

<h4>Example - disable DateTimePicker widget</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.enable(false);
&lt;/script&gt;
</code></pre>

<h4>Example - enable DateTimePicker widget</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.enable();
&lt;/script&gt;
</code></pre>

<h3 id="methods-readonly"><a href="#methods-readonly">readonly</a></h3>

<p>Toggles the readonly state of the widget. When the widget is readonly it doesn't allow user input.</p>

<blockquote>
<p>There is a difference between disabled and readonly mode. The value of a disabled widget is <strong>not</strong> posted as part of a <code>form</code> whereas the value of a readonly widget is posted.</p>
</blockquote>

<h4>Parameters</h4>

<h5>readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>The argument, which defines whether the DateTimePicker should be readonly or editable.</p>

<h4>Example - make DateTimePicker widget readonly</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.readonly();
&lt;/script&gt;
</code></pre>

<h4>Example - make DateTimePicker widget editable</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.readonly(false);
&lt;/script&gt;
</code></pre>

<h3 id="methods-max"><a href="#methods-max">max</a></h3>

<p>Gets or sets the maximum value of the DateTimePicker.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The maximum time value to set for a DateTimePicker, expressed as a Date object or as a string.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The maximum time value of a DateTimePicker.</p>

<h4>Example - get the max value of the DateTimePicker</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

var max = datetimepicker.max();

console.log(max);
&lt;/script&gt;
</code></pre>

<h4>Example - set the max value of the DateTimePicker</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.max(new Date(2100, 0, 1));
&lt;/script&gt;
</code></pre>

<h3 id="methods-min"><a href="#methods-min">min</a></h3>

<p>Gets or sets the minimum value of the DateTimePicker.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The minimum time value to set for a DateTimePicker, expressed as a Date object or as a string.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The minimum time value of a DateTimePicker.</p>

<h4>Example - get the min value of the DateTimePicker</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

var min = datetimepicker.min();

console.log(min);
&lt;/script&gt;
</code></pre>

<h4>Example - set the min value of the DateTimePicker</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.min(new Date(2000, 0, 1));
&lt;/script&gt;
</code></pre>

<h3 id="methods-open"><a href="#methods-open">open</a></h3>

<p>Opens the calendar or the time drop-down list.</p>

<h4>Parameters</h4>

<h5>view <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The view of the DateTimePicker, expressed as a string.
Available views are "time" and "date".</p>

<h4>Example - open the calendar popup</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;button id="open"&gt;Open&lt;/button&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

$("#open").click(function() {
    datetimepicker.open("date");
});
&lt;/script&gt;
</code></pre>

<h4>Example - open the time popup</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;button id="open"&gt;Open&lt;/button&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

$("#open").click(function() {
    datetimepicker.open("time");
});
&lt;/script&gt;
</code></pre>

<h3 id="methods-setOptions"><a href="#methods-setOptions">setOptions</a></h3>

<h4>Parameters</h4>

<p>Changes the initial DateTimePicker configuration.</p>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The new configuration options.</p>

<h4>Example</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    min: new Date(2001, 0, 1),
    max: new Date()
});

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.setOptions({
    min: new Date(2010, 5, 6)
});
&lt;/script&gt;
</code></pre>

<h3 id="methods-toggle"><a href="#methods-toggle">toggle</a></h3>

<p>Toggles the calendar or the time drop-down list.</p>

<h4>Parameters</h4>

<h5>view <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The view of the DateTimePicker, expressed as a string.
Available views are "time" and "date".</p>

<h4>Example - toggle the calendar popup</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;button id="toggle"&gt;Toggle&lt;/button&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

$("#toggle").click(function() {
    datetimepicker.toggle("date");
});
&lt;/script&gt;
</code></pre>

<h4>Example - toggle the time popup</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;button id="toggle"&gt;Toggle&lt;/button&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

$("#toggle").click(function() {
    datetimepicker.toggle("time");
});
&lt;/script&gt;
</code></pre>

<h3 id="methods-value"><a href="#methods-value">value</a></h3>

<p>Gets or sets the value of the DateTimePicker.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The time value to set for a DateTimePicker, expressed as a Date object or as a string.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The time value of a DateTimePicker.</p>

<blockquote>
<ul>
<li>This method <strong>does not trigger</strong> <a href="#events-change">change</a> event.
This could affect <a href="/framework/mvvm/bindings/value">MVVM value binding</a>. The model bound to the widget will not be updated.
You can overcome this behavior trigerring the <code>change</code> event manually using <a href="/api/javascript/observable#methods-trigger">trigger("change")</a> method.</li>
</ul>
</blockquote>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datepicker = $("#datetimepicker").data("kendoDateTimePicker");
datepicker.value(new Date(2016, 10, 1));
datepicker.trigger("change");
&lt;/script&gt;
</code></pre>

<h4>Example - gets the value of the widget</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(2013, 10, 10)
});

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

var value = datetimepicker.value();
console.log(value);
&lt;/script&gt;
</code></pre>

<h4>Example - sets the value of the widget</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(2013, 10, 10)
});

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.value(new Date());
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-change"><a href="#events-change">change</a></h3>

<p>Triggered when the underlying value of a DateTimePicker is changed.</p>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.ui.DateTimePicker</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "change" event during initialization</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    change: function() {
        var value = this.value();
        console.log(value); //value is the selected date in the datetimepicker
    }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "change" event after initialization</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.bind("change", function() {
    var value = this.value();
    console.log(value); //value is the selected date in the datetimepicker
});
&lt;/script&gt;
</code></pre>

<h3 id="events-close"><a href="#events-close">close</a></h3>

<p>Fires when the calendar or the time drop-down list is closed</p>

<h4>Event Data</h4>

<h5>e.view <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The view which is closed. Possible values are "date" and "time".</p>

<h5>e.sender <code>kendo.ui.DateTimePicker</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "close" event during initialization</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    close: function(e) {
        if (e.view === "date") {
            e.preventDefault(); //prevent popup closing
        }
    }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "close" event after initialization</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.bind("close", function(e) {
    if (e.view === "date") {
        e.preventDefault(); //prevent popup closing
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="events-open"><a href="#events-open">open</a></h3>

<p>Fires when the calendar or the time drop-down list is opened</p>

<h4>Event Data</h4>

<h5>e.view <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The view which is opened. Possible values are "date" and "time".</p>

<h5>e.sender <code>kendo.ui.DateTimePicker</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "open" event during initialization</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker({
    open: function(e) {
        if (e.view === "time") {
            e.preventDefault(); //prevent popup opening
        }
    }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "open" event after initialization</h4>

<pre><code>&lt;input id="datetimepicker" /&gt;
&lt;script&gt;
$("#datetimepicker").kendoDateTimePicker();

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.bind("open", function(e) {
    if (e.view === "time") {
        e.preventDefault(); //prevent popup opening
    }
});
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

